// 创建一个WeakMap对象，用于存储元素和对应的处理函数
const map = new WeakMap()
// 创建一个ResizeObserver对象，用于监听元素的大小变化

// 遍历所有变化的元素
const ob = new ResizeObserver((entries) => {
  // 获取元素对应的处理函数
  for (const entry of entries) {
    const handler = map.get(entry.target)
    if (handler) {
      // 调用处理函数，传入元素的大小
      const box = entry.borderBoxSize[0]
      handler({
        width: box.inlineSize,
        height: box.blockSize
      })
    }
  }
})

// 导出一个对象，用于在Vue中使用
export default {
  // 当元素被挂载时调用
  mounted(el: HTMLElement, binding: any) {
    // 监听元素的大小变化
    ob.observe(el)
    // 将元素和对应的处理函数存储到WeakMap中
    map.set(el, binding.value)
  },

  // 当元素被卸载时调用
  unmounted(el: HTMLElement) {
    // 停止监听元素的大小变化
    ob.unobserve(el)
    // 从WeakMap中删除元素和对应的处理函数
    map.delete(el)
  }
}
